<html lang="en">
<head>
    <meta charset="utf-8">
    <link href="/bootstrap/css/bootstrap.css"rel="stylesheet" >
    <script type="text/javascript" src="/js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="/bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="/js/echarts.min.js"></script>
    <script type="text/javascript" src="/js/apigateway.js"></script>
</head>
<body>
<div class="row" style="height: 60px;background-color: #293c55;width: 100%;margin:0 0 20 0px; ">
    <div style="margin-left: 70px;height: 100%;width: auto;color: #afd9ee;" >
        <h3>服务网关监控</h3>
    </div>
</div>
    <div class="container" style="height:100%;width:80%;">

        <div class="row">
            <select class="form-control" id="serviceOptions" style="width: 25%;">
                <optgroup label="">

                    <option value="atom" <#if serviceType=="atom" >selected="selected"</#if> >原子服务(atom)</option>
                    <option value="combination" <#if serviceType=="combination">selected="selected"</#if> >组合服务(combination)</option>
                </optgroup>
            </select>
        </div>
        <div class="row" style="height: 100%;">
            <div class="col-md-12">
                <table class="table  table-hover">
                    <thead>
                    <tr>
                        <th>服务ip</th>
                        <th>服务端口</th>
                        <th>服务类型</th>
                        <th>服务名</th>
                        <th>服务注册路径</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="services">
                    <#list services as atom>
                    <tr class="service" id="${atom.id}">
                        <td class="ip">${atom.ip}</td>
                        <td class="port">${atom.port?c}</td>
                        <td>${atom.serviceType}</td>
                        <td>${atom.serviceName}</td>
                        <td>${atom.registerPath}</td>
                        <td>
                            <button  value="${atom.id}" class="btn btn-primary serviceModal">编辑</button>
                            <button value="${atom.id}" class="btn btn-danger serviceDownModal">下线</button>
                        </td>
                    </tr>
                    </#list>
                    </tbody>
                </table>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div id="chart" style="height: 300px;width: 500px;">

                    </div>
                </div>
                <div class="col-md-4">
                    <div id="classesChart" style="height: 300px;width: 500px;">

                    </div>
                </div>
                <div class="col-md-4">
                    <div id="heapChart" style="height: 300px;width: 500px;">

                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div id="nonheapChart" style="height: 300px;width: 500px;">

                    </div>
                </div>
                <div class="col-md-4">
                    <div id="memChart" style="height: 300px;width: 500px;">

                    </div>
                </div>
                <div class="col-md-4">
                    <div id="threadChart" style="height: 300px;width: 500px;">

                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div id="combinationCallChart"></div>
                </div>
            </div>
        </div>
    </div>
</body>

    <div id="serviceModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button"  class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span><span class="sr-only">关闭</span>
                    </button>
                    <h4 class="modal-title center bold">服务信息更新</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="font_16" for="dlName">ip</label> <input
                                    type="text" class="form-control" disabled="disabled"
                                    id="serviceIp"  >
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="font_16" for="dlName">服务路径</label> <input
                                    type="text" class="form-control" disabled="disabled"
                                    id="servicePath" >
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="font_16" for="dlName">端口</label> <input
                                    type="number" class="form-control" disabled="disabled"
                                    id="servicePort"  >
                            </div>
                        </div>

                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="font_16" for="dlName">服务名</label> <input
                                    type="text" class="form-control"
                                    id="serviceName"  >
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="font_16" for="dlName">权重</label> <input
                                    type="number" class="form-control"
                                    id="serviceWeight" >
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="row">
                        <div class="col-md-3"></div>
                        <div class="col-md-4">
                            <button type="button" id="applyJyjl" class="btn btn-primary"
                                    data-dismiss="modal">保存</button>
                            <button type="button" class="btn btn-default"
                                    data-dismiss="modal">取消</button>
                        </div>
                        <div class="col-md-4"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>
<div id="serviceDownModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button"  class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span><span class="sr-only">关闭</span>
                </button>
                <h4 class="modal-title center bold">服务下线</h4>
            </div>
            <div class="modal-body">
                <h3>确定从注册中心下线该服务</h3>
            </div>
            <div class="modal-footer">
                <div class="row">
                    <div class="col-md-3"></div>
                    <div class="col-md-4">
                        <button type="button" id="downService" class="btn btn-primary"
                                data-dismiss="modal">下线</button>
                        <button type="button" class="btn btn-default"
                                data-dismiss="modal">取消</button>
                    </div>
                    <div class="col-md-4"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">

</script>
</html>